<template>
    <h2>修改入库管理</h2>

    <el-form ref="ruleFormRef" style="max-width: 600px" :model="from" :rules="rules" label-width="auto"
        class="demo-ruleForm" :size="formSize" status-icon>
        <el-form-item label="货物名称" prop="sMCargoName">
            <el-input v-model="from.sMCargoName" />
        </el-form-item>
        <el-form-item label="支付方式" prop="patternOfPayment">
            <el-radio-group v-model="from.patternOfPayment">
                <el-radio value="微信支付" size="large">微信支付</el-radio>
                <el-radio value="支付宝支付" size="large">支付宝支付</el-radio>
                <el-radio value="银联支付" size="large">银联支付</el-radio>
                <el-radio value="企业转账" size="large">企业转账</el-radio>
                <el-radio value="线下支付" size="large">线下支付</el-radio>
                <el-radio value="其他" size="large">其他</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="类型" prop="sMTypeID">
            <el-select v-model="from.sMTypeID" clearable placeholder="Select" style="width: 240px">
                <el-option :value="0" label="请选择" />
                <el-option v-for="item in TypeInfo" :key="item.typeid" :label="item.typeName" :value="item.typeid" />
            </el-select>
        </el-form-item>
        <el-form-item label="材质" prop="sMMateriaLquality">
            <el-select v-model="from.sMMateriaLquality" clearable placeholder="请选择" style="width: 240px">
                <<el-option :value="0" label="请选择" />
                <el-option v-for="item in MateriaLquality" :key="item.mmteriaLqualityID"
                    :label="item.materiaLqualityName" :value="item.mmteriaLqualityID" />
            </el-select>
        </el-form-item>
        <el-form-item label="规格" prop="sMGaugeLattice">
            <el-input v-model="from.sMGaugeLattice" />
        </el-form-item>
        <el-form-item label="产地" prop="sMProvinceID">
            <el-select v-model="from.sMNationID" clearable placeholder="国家" style="width: 240px"
                @change="Provincelist()">
                <el-option :value="0" label="请选择国家" />
                <el-option v-for="item in Nation" :key="item.nationID" :label="item.nationName"
                    :value="item.nationID" />
            </el-select>
            <el-select v-model="from.sMProvinceID" clearable placeholder="省" style="width: 240px">
                <el-option :value="0" label="请选择省" />
                <el-option v-for="item in Provincel" :key="item.provinceID" :label="item.provinceName"
                    :value="item.provinceID" />
            </el-select>
        </el-form-item>
        <el-form-item label="数量" prop="sMQuantity">
            <el-input-number v-model="from.sMQuantity" :min="1" @change="handleChange" />
        </el-form-item>
        <el-form-item label="单价" prop="sMSingleValence">
            <el-input v-model="from.sMSingleValence" placeholder="请输入单价" />
        </el-form-item>
        <el-form-item label="备注" prop="sMQuantity">
            <el-input v-model="from.sPReserveNote" type="textarea" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                修改
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
    </el-form>

</template>

<script setup lang='ts'>

import { reactive, ref, onMounted, watch } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios';
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()


//数据信息
const from = reactive({

    "sMCargoID": 0,
    "sMCargoName": "",
    "patternOfPayment": "",
    "sMTypeID": 0,
    "sMMateriaLquality": 0,
    "sMGaugeLattice": "",
    "sMNationID": 0,
    "sMProvinceID": 0,
    "sMSingleValence": 0,
    "sMQuantity": 0,
    "sPReserveNote": "",
    "sPFirmId": "",
    "sPUserId": 0,
    "isDel": true,
    "createName": "",
    "createDate": "",
})

//生命函数钩
onMounted(() => {
    //反填入库管理信息
    StockManagementInfo()
    //显示类  型
    TypeInfolist()
    //显示材 质
    MateriaLqualitylist();
    //显示产 地：国家
    Nationlist();
})
//显示类    型
const TypeInfo = ref([])
const TypeInfolist = () => {
    from.sMProvinceID = 0;
    axios.get("MaterialRead/api/Public/TypeInfolist").then(res => {
        TypeInfo.value = res.data.data;
    }).catch(err => {
        console.log(err)
    })
}
//显示材 质
const MateriaLquality = ref([])
const MateriaLqualitylist = () => {
    axios.get("MaterialRead/api/Public/MateriaLqualitylist").then(res => {
        MateriaLquality.value = res.data.data;
    }).catch(err => {
        console.log(err)
    })
}
//显示产 地：国家
const Nation = ref([])
const Nationlist = () => {
    axios.get("MaterialRead/api/Public/Nationlist").then(res => {
        Nation.value = res.data.data;
    }).catch(err => {
        console.log(err)
    })
}
//显示产 地：省
const Provincel = ref([])
const Provincelist = () => {
    axios.get("MaterialRead/api/Public/Provincelist?nationID=" + from.sMNationID).then(res => {
        Provincel.value = res.data.data;
    }).catch(err => {
        console.log(err)
    })
}
//反填入库管理信息
const StockManagementInfo = () => {
    axios.get("MaterialRead/api/StockManagement/StockManagementInfo?sMCargoID=" + route.query.id).then(res => {
        from.sMCargoID = res.data.data.sMCargoID;
        from.sMCargoName = res.data.data.sMCargoName;
        from.patternOfPayment = res.data.data.patternOfPayment;
        //显示类  型
        TypeInfolist()
        from.sMTypeID = res.data.data.sMTypeID;
        //显示材 质
        MateriaLqualitylist();
        from.sMMateriaLquality = res.data.data.sMMateriaLquality;
        from.sMGaugeLattice = res.data.data.sMGaugeLattice;
        //显示产 地：国家
        Nationlist();
        from.sMNationID = res.data.data.sMNationID;
        //显示产 地：省
        Provincelist()
        from.sMProvinceID = res.data.data.sMProvinceID;
        from.sMSingleValence = res.data.data.sMSingleValence;
        from.sMQuantity = res.data.data.sMQuantity;
        from.sPReserveNote = res.data.data.sPReserveNote;
        from.sPFirmId = res.data.data.sPFirmId;
        from.sPUserId = res.data.data.sPUserId;
        from.isDel = res.data.data.isDel;
        from.createName = res.data.data.createName;
        from.createDate = res.data.data.createDate;
    }).catch(err => {
        console.log(err)
    })
}



//验证
const rules = reactive<FormRules>({
    sMCargoName: [
        { required: true, message: '货物名称不能为空', trigger: 'blur' },
    ], sMQuantity: [
        { required: true, message: '数量不能为空', trigger: 'blur' },
    ], sMSingleValence: [
        { required: true, message: '价格不能为空', trigger: 'blur' },
    ],
    patternOfPayment: [
        {
            required: true,
            message: '请选择',
            trigger: 'change',
        },
    ],
    sMTypeID: [
        {
            required: true,
            message: '请选择',
            trigger: 'change',
        },
    ], sMMateriaLquality: [
        {
            required: true,
            message: '请选择',
            trigger: 'change',
        },
    ],
    sPProvinceID: [
        {
            required: true,
            message: '请选择',
            trigger: 'change',
        },
    ], sMNationID: [
        {
            required: true,
            message: '请选择',
            trigger: 'change',
        },
    ]
})
//数值
const handleChange = (value: number) => {
    from.sMQuantity = value
    console.log(value)
}
//提交审核
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log(from)
             axios.post("materialwrite/api/StockManagement/UPDStockManagement", from).then(res => {
                if (res.data.code > 0) {
                    ElMessage.success("修改成功")
                    router.push("/DePutInStorageList")
                } else {
                    ElMessage.error("修改失败")
                }
            }).catch(err => {
                console.log(err)
            })

        } else {
            console.log('error submit!', fields)
        }
    })
}
//重置
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}



</script>

<style></style>